


import styled from 'styled-components';
import { useParams, useNavigate } from 'react-router-dom';
import React, { CSSProperties, FC, useCallback, useEffect, useState } from 'react';
import { PlusOutlined, LeftOutlined, LoadingOutlined } from '@ant-design/icons';
import { Tabs } from 'antd';
import { AudioWithSV2TTSAssistant, SoundCloneAssistant, TextAreaWithAssistant, VideoWithAssistant } from '../components';
import { Player } from 'video-react';
import { DeviceFrameset } from 'react-device-frameset'
import { convertFileSrc } from '@tauri-apps/api/core';

import 'react-device-frameset/styles/marvel-devices.min.css'
import "video-react/dist/video-react.css";

export interface SimpleDigitalHumanPageProps {
    style?: CSSProperties;
    projectIdentifier: string;
}

export const SimpleDigitalHumanPage: FC<SimpleDigitalHumanPageProps> = (props) => {

    const [content, setContent] = useState<string>('');

    const [video, setVideo] = useState<string | null>(convertFileSrc('/Users/jinisu/Documents/说车美女.mp41'));

    // useEffect(() => {
    //     //获取文件中的内容
    //     readTextFromFile(`${props.dataSource.url}/文案.txt`, {}).then((content) => {
    //         setContent(content);
    //     });
    // }, [props.dataSource.url]);

    console.log(video);


    return (
        <Container>
            <SoundCloneAssistant style={{ flex: 1 }} title={'音频生成'} text={content}></SoundCloneAssistant>
            <PlayerContainer>
                <DeviceFrameset device="iPhone 8" color="black">
                    <Player
                        style={{
                            width: '100%',
                            height: '100%'
                        }}
                        playsInline
                        src={video}
                    />
                </DeviceFrameset>
            </PlayerContainer>
        </Container>
    );
}

const Container = styled.div`
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: row;
    background-color: #FFFFFF;
`;


const PlayerContainer = styled.div`
    height: 100%;
    width: 460px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: auto;
`;
export default SimpleDigitalHumanPage


